<template>
  <div class="address cover">
    <mall-header></mall-header>
    <section class="address-title">
      <div class="container">
        <h1>配送地址</h1>
      </div>
    </section>
    <section class="address-board">
      <ul class="address-list clearfix">
        <li
          class="address-item"
          :class="{ checked: checkedIndex === index }"
          v-for="(item, index) in addressListFilter"
          :key="item.addressId"
          @click="checkedIndex = index"
        >
          <dl class="info">
            <dt class="user-name">{{ item.userName }}</dt>
            <dd class="street-name">{{ item.streetName }}</dd>
            <dd class="tel">电话：{{ item.tel }}</dd>
          </dl>
          <div class="set-default" v-if="!item.isDefault">
            <a href="javascript:;" @click="setDefault(item.addressId)">
              <span>设为默认</span>
            </a>
          </div>
          <div class="default" v-if="item.isDefault">
            <a href="javascript:;">
              <span>默认地址</span>
            </a>
          </div>
          <div class="address-delete">
            <a href="javascript:;" @click="removeAddress(item.addressId)">
              删除
            </a>
          </div>
        </li>
      </ul>
    </section>
    <div class="address-more">
      <a href="javascript:;" @click="seeMore"
        >点击查看更多收货地址 <i class="icon-arrow-down"></i>
      </a>
    </div>
  </div>
</template>


<script lang="ts">
import axios from "axios";
import { Vue, Component } from "vue-property-decorator";
import { addressItem } from "../types/index";

import MallHeader from "@/components/MallHeader/MallHeader.vue";

@Component({
  name: "MallAddress",
  components: {
    MallHeader,
  },
})
export default class MallAddress extends Vue {
  private addressList: addressItem[] = [];

  //定义一个索引
  private checkedIndex: number = 0;
  private limitNum: number = 3;

  getAddressData() {
    axios.get("/mock/address.json").then((response) => {
      const res = response.data;
      const data = res.data;

      /**
       * console.log(data);
       * [
       *   {addressId: '001', userName: '小红', streetName: '北京市东城区', postCode: '100001', tel: 18655555555, …},
       *   {addressId: '002', userName: '小明', streetName: '天津市南开区', postCode: '100002', tel: 18666666666, …},
       *   {addressId: '003', userName: '小妹', streetName: '北京市朝阳区', postCode: '100003', tel: 18677777777, …},
       *   {addressId: '004', userName: '小黑', streetName: '广州市海珠区', postCode: '100004', tel: 18688888888, …},
       *   {addressId: '005', userName: '小德', streetName: '佛山市高明区', postCode: '100005', tel: 18699999999, …}
       * ]
       */

      this.addressList = data;
    });
  }

  removeAddress(addressId: string) {
    this.addressList.forEach((elem, idx) => {
      if (elem.addressId === addressId) {
        this.addressList.splice(idx, 1);
      }
    });
  }

  setDefault(addressId: string) {
    this.addressList.map((elem, idx) => {
      if (elem.addressId === addressId) {
        elem.isDefault = true;
      } else {
        elem.isDefault = false;
      }
    });
  }

  seeMore() {
    if (this.limitNum === 3) {
      this.limitNum = this.addressList.length;
    } else {
      this.limitNum = 3;
    }
  }

  created() {
    this.getAddressData();
  }

  get addressListFilter() {
    return this.addressList.slice(0, this.limitNum);
  }
}
</script>

<style lang="scss" scoped>
.address-title {
  .container {
    width: 1226px;
    margin: 2rem auto;
    height: 100%;
    justify-content: space-between;
  }
}

.address-board {
  width: 1226px;
  margin: 0 auto;
  height: 100%;

  .address-list {
    height: 100%;

    .address-item {
      float: left;
      position: relative;
      width: 20rem;
      height: 10rem;
      border: 2px solid #ddd;
      background: #fff;
      margin-right: 3rem;
      margin-bottom: 2rem;
      padding: 1rem 2rem 0;
      cursor: pointer;

      .info {
        .user-name {
          font-weight: bold;
          font-size: 18px;
        }

        .street-name {
          margin-top: 0.6rem;
          font-size: 14px;
          color: #757575;
        }
        .tel {
          margin-top: 1.2rem;
        }
      }

      .set-default {
        display: none;
        position: absolute;
        bottom: 0.9rem;
        left: 2rem;
        // color: #ff6700;

        a {
          color: #ff6700;
        }
      }

      .default {
        margin-top: 0.8rem;
        // color: #ff6700;

        a {
          color: #ff6700;
        }
      }

      .address-delete {
        position: absolute;
        bottom: 0.7rem;
        right: 2rem;
      }
    }

    .address-item.checked {
      border-color: #ff6700;
      border-width: 2px;

      .set-default {
        display: block;
      }
    }
  }
}

.address-more {
  width: 1226px;
  margin: 0 auto;
  font-size: 20px;
  text-align: center;

  a {
    color: #ff6700;
  }
}
</style>